import { Component } from 'react'
import { connect } from 'react-redux'
import {View, Text, Image, ScrollView} from '@tarojs/components'

import {getOneConstruct, homeItemList} from "../../actions/home";

import searchIcon from '../../assets/icon/message.svg'
import sousuo from "../../assets/icon/souuso_icon@2x.png";

import './home.less'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  home: {
    data: {},
    items: Array<{
      name: ''
    }>,
  }
}

type PageDispatchProps = {
  getOneConstruct: (object) => any;
  homeItemList: (object) => any;
}

type PageOwnProps = {}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
// type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Home {
  props: IProps;
}

// @ts-ignore
@connect(({ counter, home }) => ({
  home
}), (dispatch) => ({
  getOneConstruct(object) {
    // @ts-ignore
    dispatch(getOneConstruct(object));
  },
  homeItemList(object) {
    // @ts-ignore
    dispatch(homeItemList(object));
  }
}))
class Home extends Component {
  componentDidMount() {
    this.props.getOneConstruct({
      'qp-status-eq': '1',
      'qp-type-eq': '3'
    });
    // this.props.homeItemList({});
  }

  // 属性或状态的改变会触发一次更新。当一个组件在被重新渲染时，这些方法将会被调用：
  componentWillReceiveProps (nextProps) {
    console.log('-------componentWillReceiveProps------', this.props, nextProps);
  }

  componentWillUnmount () {
    console.log('-------componentWillUnmount------', this.props);
  }

  componentDidShow () {
    console.log('-------componentDidShow------', this.props);
  }

  componentDidHide () {
    console.log('-------componentDidHide------', this.props);
  }

  rederContentView = (configuration: any) => {
    return configuration.map(item=>{
      if (item.type === 'yihangyitu') {
        return (<View>一行一图</View>);
      } else if (item.type==='biaotibanner') {
        return (<View>标题banner</View>);
      } else {
        return (<View>空白页面</View>);
      }
    })
  };

  render () {
    return (
      <View className='home'>
        <View className='home__search'>
          <View className='home__search-warp'>
            <Image className='home__search-warp-img' src={sousuo} />
            <Text className='home__search-warp-text'>请输入关键词进行搜索</Text>
          </View>
          <Image className='home__search-msg' src={searchIcon} />
        </View>
        {/*<View><Text>{this.props.home.items.map(item=>(item.name + '\n'))}</Text></View>*/}
        <View><Text>Hello, World home</Text></View>
      </View>
    )
  }
}

export default Home
